<template>
  <div id="centerTop">
    <div class="classify">
      <el-row>
        <el-col :span="5" class="left-classify">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <div class="complete">
              <span>全部商品分类</span>
              <i class="icon iconfont icon-ziyuan"></i>
            </div>
            <el-menu-item index="0">
              <i class="icon iconfont icon-cate-4"></i>
              <span slot="title">美食</span>
            </el-menu-item>
            <el-menu-item index="1">
              <i class="icon iconfont icon-hotel"></i>
              <span slot="title">酒店</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="icon iconfont icon-travelholidayvacat"></i>
              <span slot="title">旅游</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="icon iconfont icon-serve"></i>
              <span slot="title">生活服务</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="icon iconfont icon-travelholidayvacat"></i>
              <span slot="title">丽人</span>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="icon iconfont icon-recreation"></i>
              <span slot="title">休闲娱乐 / KTV</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="icon iconfont icon-study1"></i>
              <span slot="title">学习培训</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="15" class="right-classify">
          <div class="cetop">
            <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
              background-color="#545c64"
              style="border:none"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1">首页</el-menu-item>
              <el-menu-item index="3">旅游</el-menu-item>
              <el-menu-item index="4">酒店</el-menu-item>
              <el-submenu index="2">
                <template slot="title">商家入驻</template>
                <el-menu-item index="2-1">武汉</el-menu-item>
                <el-menu-item index="2-2">十堰</el-menu-item>
                <el-menu-item index="2-3">襄阳</el-menu-item>
              </el-submenu>

              <el-menu-item index="5">
                <a href="https://www.ele.me" target="_blank">订单管理</a>
              </el-menu-item>
            </el-menu>
          </div>
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="(item,index) in bannimgs" :key="index">
              <img :src="item.url" alt>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="4" class="advertising">
          <el-menu>
            <img class="advertising-img" src="../../../../static/images/recommendation.png">
            <img class="advertising-img" src="../../../../static/images/1550734288(1).jpg">
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import store from "@/vuex/store";
import axios from "axios";
export default {
  name: "centerTop",
  components: {},
  data() {
    return {
      select: "",
      activeIndex2: "1",
      bannimgs: [
        {
          url:
            "http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg",
          id: 1
        },
        {
          url:
            "http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg",
          id: 2
        },
        {
          url:
            "http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg",
          id: 3
        },
        {
          url:
            "http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg",
          id: 4
        }
      ]
    };
  },
  store,
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push({ name: "Settled" });
    }
  },
  created: function() {
    axios
      .get(
        "https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods"
      )
      .then(response => {
        // console.log("成功", response);
        this.oftenGoods = response.data;
      })
      .catch(error => {
        console.log("失败", error);
        //   alert('网络错误，不能访问');
      });
  }
};
</script>

<style scoped  lang="less">
body,
html {
  margin: 0px;
  padding: 0px;
}
.el-menu-item,
.el-menu-demo,
.el-submenu__title {
  height: 52px;
}
.el-submenu {
  height: 50px;
  line-height: 50px;
}
#centerTop {
  width: 100%;
  background-color: white;
  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .classify {
    width: 100%;
    .left-classify {
      .complete {
        width: 100%;
        height: 50px;
        color: white;
        font-size: 18px;
        background-color: #ec6d2d;
        display: flex;
        justify-content: space-between;
        align-items: center;
        i {
          padding-right: 20px;
          font-size: 20px;
        }
        span {
          padding-left: 18px;
        }
      }
    }
    .right-classify {
      .el-menu--horizontal > .el-submenu .el-submenu__title {
        height: 52px;
        line-height: 52px;
        color: #909399;
      }
      .cetop {
        height: 52px;
        overflow: hidden;
        z-index: -1;
      }
      .el-carousel {
        height: 361px;
      }
      .el-carousel__item,
      .el-carousel__mask {
        height: 361px;
      }
      .top-bars {
        width: 100%;
        height: 50px;
        background-color: #545c64;
      }
    }
    .el-menu.el-menu--horizontal {
      border-bottom: none;
    }
    .advertising-img {
      width: 100%;
      height: 205px;
      padding-left: 4px;
      cursor: pointer;
    }
  }
}
</style>

